<template>
  <div>
    <h3>测试消息组件</h3>
    <el-alert title="请求成功" type="success"></el-alert>
    <el-alert title="请求失败" type="error"></el-alert>
    <el-alert title="系统警告" type="warning"></el-alert>
    <el-alert title="提示信息" type="info"></el-alert>

    <h4>消息组件之属性使用</h4>
    <el-alert title="请求成功" type="success" effect="dark" :closable="false" description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"></el-alert>
    <el-alert title="请求失败" type="error" center close-text="关闭" :show-icon="true"></el-alert>

    <h4>消息组件之事件使用</h4>
    <el-alert title="系统警告" type="warning" @close="printInfo"></el-alert>
    <el-alert title="提示信息" type="info"></el-alert>

    <h4>使用消息提示</h4>
    <el-button type="primary" @click="showMsg">点击展示消息提示</el-button>

    <h4>消息提示方法的使用</h4>
    <el-button type="primary" @click="closeMsg">点击关闭消息提示</el-button>


  </div>
</template>
<script>

  export default {
    methods:{
      printInfo() {
        console.log("已关闭系统警告");
      },
      showMsg() {
        // 最简单的消息提示
        // this.$message("表单提交成功");
        // this.$message.success("表单提交成功");

        // 自定义复杂样式的消息提示
        // const h = this.$createElement;
        // this.$message({
        //   message: h('p', null, [
        //     h('span', null, '内容可以是 '),
        //     h('i', { style: 'color: red' }, '您的订单号是: 87')
        //   ])
        // });

      //   使用特定主题的信息
        this.$message({
          message: "恭喜您, 已升级!",
          type: "success",
          showClose: true,
          center: true,
          // iconClass: "el-icon-message-solid",
          duration: 0, //0 表示永远不会自动关闭


        })

      },
      closeMsg() {
        // 注意:官方文档上的close方法并不能生效, 需要使用closeAll方法才能成功
        this.$message.closeAll();
      },
    }
  }
</script>
<style scoped>

</style>
